<template>
  <div>
    <Personinfo style="height: 50px;"></Personinfo>
    <Logox></Logox>
    <menux></menux>
    <el-main>
              <el-row style="margin-top: 5px;">
                <el-form ref="form" label-width="80px" style="margin-left: 200px;padding-top: 20px;">
                  <el-form-item label="文章搜索">
                    <el-input v-model="searchInput" style="width: 600px" placeholder="请输入关键字">
                      <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                  </el-form-item>
                </el-form>
              </el-row>

            <el-row>
                <el-card class="box-card" v-for="article in articles">
                  <el-row :gutter="18" style="margin: 0px 0px;padding: 0px 0px;">
                   <el-col :span="2" style="background-color: #cbcbcb;
                                           height: 80px;" >
                     <div style="font-size: 24px;color:white;text-align:center;padding-top: 8px"><strong>{{article.pubDateTime.substring(8,10)}}</strong></div>
                     <div style="font-size: 18px;color:white;text-align:center">{{article.pubDateTime.substring(0,7)}}</div>
                    </el-col>
                    <el-col :span="14" style="width: 950px">
                      <div class="grid-content bg-purple"><h4 style="margin: 2px;">{{article.title}}</h4></div>
                    </el-col>
                    <el-col :span="2" align="right">
                      <el-link @click="show(article.id)" style="margin-top: 60px">查看详情>></el-link>
                    </el-col>
                  </el-row>
                </el-card>
            </el-row>

            <el-row style="margin-top: 20px">
                  <el-pagination style="margin-left: 200px"
                      :current-page="1"
                      :page-sizes="[10, 20, 30, 50]"
                      :page-size="100"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="400">
                  </el-pagination>
            </el-row>

      </el-main>
    <el-footer>
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="8" :offset="8">
          <footerx></footerx>
        </el-col>
      </el-row>
    </el-footer>
  </div>
</template>

<script>
import footerx from "../footerx";
import menux from '../menux'
import Logox from '../Logox'
import Personinfo from "../Personinfo";
import {NewList,NewDetail} from "./../../api/news";
export default {
  name: "rencai",
  components: {menux,Logox,footerx,Personinfo},
  data (){
    return {
      searchInput: "",
      articles:[
      ]
    }
  },
  methods:{
    show(id){
      this.$router.push("/NewDetail/"+id)
    }
  },
  mounted() {
    NewList.r({}).then(d=>{
      if(d.data.data&&d.data.data.length>0){
        d.data.data.forEach(e=>{
          this.articles.push(e)
        })
      }
    })
  }
}
</script>

<style scoped>
.el-main{
  margin:0 auto;
  padding: 0;
  background: azure;
  width: 1200px;
}
/deep/ .el-card__body{
  margin: 0px 0px;
  padding: 0px 0px;
}
.box-card{
  margin-top: 20px;
}
</style>